<style>
    /* 顶部导航 */

    .nav-header {
        width: 500px;
        font-size: 18px;
        font-weight: 600;
        padding-left: 100px;
        padding-bottom: 5px;
        border-bottom: 3px solid #D0E9FF;
    }

    .nav-header a {
        padding: 2px 5px;
        margin-right: 30px;
        color: black;
        text-decoration: none;
        border-radius: 3px;
    }

    .nav-header a:hover {
        color: #37C6C0;
    }

    /* 用户首页 */

    .home {
        width: 520px;
        margin-top: 15px;
        text-align: center;
    }

    /* 其他 */

    .container {
        display: grid;
        grid-template-columns: 100px 500px;
        grid-template-rows: auto 
    }

    /* 其他导航 */

    .nav-left {
        grid-column: 1/2;
        list-style: none;
        padding: 5px 8px;
        border-right: 1px dashed black;

    }

    .nav-left li {
        margin-top: 5px;
    }

    .nav-left a {
        padding: 2px 4px;
        color: #000;
        text-decoration: none;
        border-radius: 5px;
    }

    .nav-left a:hover {
        color: #37C6C0;
    }

    /* 其他主题 */

    .main-right {
        grid-column: 2/3;
        padding: 15px 30px;
    }

    .main-left-content {
        padding: 5px 8px;
        border: 1px dashed black;
    }

    /* 已激活的链接样式 */

    a.router-link-active,
    li.router-link-active>a {
        background-color: gainsboro;
        color: #37C6C0;
    }
</style>
<div id="app">
    <h1>vue-router 测试页</h1>
    <div class="nav-header">
        <router-link to="/" exact>用户首页</router-link>
        <router-link to="/settings">用户设置</router-link>
        <router-link to="/interaction">社交管理</router-link>
        <!-- <router-link to="/notification">系统公告</router-link> -->
        <router-link to="/notification">我的消息</router-link>
    </div>
    <router-view></router-view>
</div>